<template>
	<view>
		<view class="input_box" :class="[zindex ? 'zindex_dis' : 'zindex_no']">
				<view class="input_list" style="position:relative;">
					<view class="input">
						<view class="row j-sa">
							<view class="">
								<picker @change="bindPickerChangeProvince" :value="indexprovince" :range="provincearr">
									<view>{{provincearr[indexprovince]}}</view>
								</picker>
							</view>
							<view class="">
								<picker @change="bindPickerChangeCity" :value="indexcity" :range="cityarr">
									<view>{{cityarr[indexcity]}}</view>
								</picker>
							</view>
							<view class="">
								<picker @change="bindPickerChangeDistrict" :value="indexdistrict" :range="districtarr">
									<view>{{districtarr[indexdistrict]}}</view>
								</picker>
							</view>
						</view>
					</view>
					<span style="position:absolute;right:0;bottom:0;font-size:10px;border:1px solid;border-radius:25upx;padding:0 16upx;text-indent:0;" @click="sureCity()">确定</span>
				</view>
		</view>
		<view class="main-bg-color-hui p-1">
		</view>
		<view class="p-3 main-bg-color-bai" style="position:relative;">
			<view class="top">
				<span style="height:80upx;line-height:80upx;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"><text class="curposition_icon iconfont">&#xe6a2;</text>{{citySelect}}</span>
				<view  @click="citySelected()">
					全国
				</view>
			</view>
			<view class="row j-sb a-center p-1" style="height: 80upx;border: 1px solid #f6f6f6;">
				<input @input="inputChange" @confirm="search()" type="text" value="" placeholder="请输入门店名称" />
				<image @tap="search()" src="../../static/search.jpg" style="width: 50upx;height: 52upx;"></image>
			</view>
		</view>
		<view class="p-3 main-text-color-hei">
			<block v-for="(item,index) in addressList" :key="index">
				<!-- <radio-group @change="radioChange"  style="width:10%;float:left;height:240rpx;">
					<radio :value="item.id" :checked="index === current" style="line-height:260rpx;" />
				</radio-group> -->
				<!-- <view style="width:90%;float:left;"> -->
				<view>
					<view class="font-md font-weight-6 py-1" style="border-bottom: 1px solid #f6f6f6;" @click="toMap(item.latitude,item.longitude)">门店：{{item.store_name}}</view>
					<view class="py-2 row a-center j-sb">
						<image :src="baseUrl+item.store_bgimg" style="width: 130upx;height: 128upx;" @click="toMap(item.latitude,item.longitude)"></image>
						<view class="px-2" style="width: 320upx;border-right: 1px solid #f6f6f6;" @click="toMap(item.latitude,item.longitude)">
							<view class="main-text-color-hei font-md">
								{{item.address}}
							</view>
							<view class="font-sm">
								距离：{{item.distance}}
							</view>
							<view class="font-sm">
								时间：{{item.work_time}}
							</view>
						</view>
						<view @click="tel(item.tel_phone)">
							<image src="../../static/phone.jpg" style="width: 50upx;height: 50upx;" class="px-2"></image>
						</view>
						
					</view>
					<view class="main-bg-color-hui p-1">
					</view>
				</view>
			</block>
			
		</view>
		
	</view>
</template>

<script>
	import request from '@/common/lib/request.js'
	export default {
		data() {
			return {
				citySelect:'正在获取定位...',
				zindex:false,
				provincearr:['--省'],
				indexprovince: 0,
				cityarr:['--市'],
				indexcity:0,
				districtarr:['--区'],
				indexdistrict:0,
				keyword:'',
				p_c_d:0,
				area_code:0,
				searchCity: {
					p_area_code:0,
					p_areaid:0,
					province:'',
					c_area_code:0,
					c_areaid:0,
					city:'',
					d_area_code:0,
					d_areaid:0,
					district:''
				},
				page:1,
				baseUrl:request.common.baseUrl,
				addressList:[],
				current: -1
			}
		},
		onShow() {
			if(uni.getStorageSync('curPosition')){
				this.citySelect = uni.getStorageSync('curPosition')
			}
		},
		onLoad:function(){
			// uni.setStorageSync('keyLatitude','30.555166')
			// uni.setStorageSync('keyLongitude','114.259186')
			uni.request({
				url: request.common.baseUrl+'/api/address/province',
				data: {},
				header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
				},
				success: (res) => {
					if(res.data.code==200){
						uni.setStorageSync('keyProvinces',res.data.data)
						// this.searchCity.area_code=res.data.data[1].areaCode
						// this.searchCity.p_areaid=res.data.data[1].areaId
						// this.searchCity.province=res.data.data[1].areaName
						for (var j = 0; j < res.data.data.length; j++) {
							this.provincearr.push(res.data.data[j].areaName)
						}
					}
				}
			})
			uni.request({
			    url: request.common.baseUrl+'/api/goods/stores',
			    data: {
					latitude:uni.getStorageSync('keyLatitude'),
					longitude:uni.getStorageSync('keyLongitude'),
					page:this.page
				},
			    header: {
					'Content-Type':'application/json;charset=UTF-8',
					'Content-Type':'application/x-www-form-urlencoded'
			    },
			    success: (res) => {
			        if(res.data.code==200){
						for(var i=0;i<res.data.data.length;i++){
							if(res.data.data[i].distance>1000){
								res.data.data[i].distance=Math.round(res.data.data[i].distance/1000)+'km'
							}else{
								res.data.data[i].distance=res.data.data[i].distance+'m'
							}
						}
						this.addressList=res.data.data
					}else{
						uni.showToast({
						    title: '暂无数据',
							icon: 'none',
						    duration: 2000
						});
					}
			    }
			});
		},
		methods: {
			citySelected(){
				this.zindex=true;
			},
			sureCity(){
				this.zindex=false;
				this.page=1
				uni.request({
				    url: request.common.baseUrl+'/api/goods/storeSearch',
				    data: {
						keyword:this.keyword,
						latitude:uni.getStorageSync('keyLatitude'),
						longitude:uni.getStorageSync('keyLongitude'),
						page:this.page,
						p_c_d:this.p_c_d,
						area_code:this.area_code
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
						this.addressList=[]
				        if(res.data.code==200){
							for(var i=0;i<res.data.data.length;i++){
								if(res.data.data[i].distance>1000){
									res.data.data[i].distance=Math.round(res.data.data[i].distance/1000)+'km'
								}else{
									res.data.data[i].distance=res.data.data[i].distance+'m'
								}
							}
							this.addressList=res.data.data
						}else{
							uni.showToast({
							    title: '暂无数据',
								icon: 'none',
							    duration: 2000
							});
						}
				    }
				});
			},
			bindPickerChangeProvince(e) {
				if(e.target.value==0){
						this.provincearr=['--省']
						for (var j = 0; j < uni.getStorageSync('keyProvinces').length; j++) {
							this.provincearr.push(uni.getStorageSync('keyProvinces')[j].areaName)
						}
						this.indexprovince = 0
						this.cityarr=['--市']
						this.districtarr=['--区']
						this.indexcity = 0
						this.indexdistrict = 0
						this.p_c_d=0
						this.area_code=0
						this.searchCity.p_area_code=0
						this.searchCity.p_areaid=0
						this.searchCity.province=''
						// this.citySelect='全国'
				}else{
					this.indexprovince = e.target.value
					uni.request({
						url: request.common.baseUrl+'/api/address/cityDistrict',
						data: {
							parentId:uni.getStorageSync('keyProvinces')[e.target.value-1].areaId
						},
						header: {
							'Content-Type':'application/json;charset=UTF-8',
							'Content-Type':'application/x-www-form-urlencoded'
						},
						success: (res) => {
							if(res.data.code==200){
								this.cityarr=['--市']
								this.districtarr=['--区']
								this.indexcity = 0
								this.indexdistrict = 0
								this.searchCity.p_area_code=uni.getStorageSync('keyProvinces')[e.target.value-1].areaCode
								this.searchCity.p_areaid=uni.getStorageSync('keyProvinces')[e.target.value-1].areaId
								this.searchCity.province=uni.getStorageSync('keyProvinces')[e.target.value-1].areaName
								this.citySelect=uni.getStorageSync('keyProvinces')[e.target.value-1].areaName
								this.p_c_d=1
								this.area_code=uni.getStorageSync('keyProvinces')[e.target.value-1].areaCode
								uni.setStorageSync('keyCitys',res.data.data)
								for (var j = 0; j < res.data.data.length; j++) {
									this.cityarr.push(res.data.data[j].areaName)
								}
							}
						}
					})
				}
				
			},
			bindPickerChangeCity(e) {
				if(e.target.value==0){
						// this.cityarr=['--市']
						this.districtarr=['--区']
						this.indexcity = 0
						this.indexdistrict = 0
						this.p_c_d=1
						this.area_code=this.searchCity.p_area_code
				}else{
					this.indexcity = e.target.value
					uni.request({
						url: request.common.baseUrl+'/api/address/cityDistrict',
						data: {
							parentId:uni.getStorageSync('keyCitys')[e.target.value-1].areaId
						},
						header: {
							'Content-Type':'application/json;charset=UTF-8',
							'Content-Type':'application/x-www-form-urlencoded'
						},
						success: (res) => {
							if(res.data.code==200){
								this.districtarr=['--区']
								this.indexdistrict = 0
								this.searchCity.c_area_code=uni.getStorageSync('keyCitys')[e.target.value-1].areaCode
								this.searchCity.c_areaid=uni.getStorageSync('keyCitys')[e.target.value-1].areaId
								this.searchCity.city=uni.getStorageSync('keyCitys')[e.target.value-1].areaName
								this.citySelect=uni.getStorageSync('keyCitys')[e.target.value-1].areaName
								this.p_c_d=2
								this.area_code=uni.getStorageSync('keyCitys')[e.target.value-1].areaCode
								uni.setStorageSync('keyDistrics',res.data.data)
								for (var j = 0; j < res.data.data.length; j++) {
									this.districtarr.push(res.data.data[j].areaName)
								}
							}
						}
					})
				}
			    
				
			},
			bindPickerChangeDistrict(e) {
				if(e.target.value==0){
						// this.districtarr=['--区']
						this.indexdistrict = 0
						this.p_c_d=2
						this.area_code=this.searchCity.c_area_code
				}else{
					this.indexdistrict = e.target.value
					this.searchCity.d_area_code=uni.getStorageSync('keyDistrics')[e.target.value-1].areaCode
					this.searchCity.d_areaid=uni.getStorageSync('keyDistrics')[e.target.value-1].areaId
					this.searchCity.distric=uni.getStorageSync('keyDistrics')[e.target.value-1].areaName
					this.citySelect=uni.getStorageSync('keyDistrics')[e.target.value-1].areaName
					this.p_c_d=3
					this.area_code=uni.getStorageSync('keyDistrics')[e.target.value-1].areaCode
				}
				
			},
			inputChange: function (e) {
				this.keyword=e.detail.value
			},
			// radioChange: function(evt) {
			// 	for (let i = 0; i < this.addressList.length; i++) {
			// 		if (this.addressList[i].id === evt.target.value) {
			// 			this.current = i;
			// 			uni.setStorageSync('keyStoreId',evt.target.value);
			// 			break;
			// 		}
			// 	}
			// },
			search:function(){
				this.page=1
				uni.request({
				    url: request.common.baseUrl+'/api/goods/storeSearch',
				    data: {
						keyword:this.keyword,
						latitude:uni.getStorageSync('keyLatitude'),
						longitude:uni.getStorageSync('keyLongitude'),
						page:this.page,
						p_c_d:this.p_c_d,
						area_code:this.area_code
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
						this.addressList=[]
				        if(res.data.code==200){
							
							for(var i=0;i<res.data.data.length;i++){
								if(res.data.data[i].distance>1000){
									res.data.data[i].distance=Math.round(res.data.data[i].distance/1000)+'km'
								}else{
									res.data.data[i].distance=res.data.data[i].distance+'m'
								}
							}
							this.addressList=res.data.data
						}else{
							uni.showToast({
							    title: '暂无数据',
								icon: 'none',
							    duration: 2000
							});
						}
				    }
				});
			},
			toMap(lat,lng){
				uni.openLocation({
					latitude: lat,
					longitude: lng,
					success: function () {
						console.log('success');
					}
				});
			},
			//拨打电话
			tel(tel_phone) {
				uni.makePhoneCall({
					phoneNumber:tel_phone //仅为示例
				});
			}
		},
		onReachBottom:function(){
			this.page=this.page+1;
			if(this.keyword){
				uni.request({
				    url: request.common.baseUrl+'/api/goods/storeSearch',
				    data: {
						keyword:this.keyword,
						latitude:uni.getStorageSync('keyLatitude'),
						longitude:uni.getStorageSync('keyLongitude'),
						page:this.page,
						p_c_d:this.p_c_d,
						area_code:this.area_code
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
				        if(res.data.code==200){
							for (var j = 0; j < res.data.data.length; j++) {
								if(res.data.data[j].distance>1000){
									res.data.data[j].distance=Math.round(res.data.data[j].distance/1000)+'km'
								}else{
									res.data.data[j].distance=res.data.data[j].distance+'m'
								}
								this.addressList.push(res.data.data[j])
							}
						}else{
							uni.showToast({
							    title: '暂无数据',
								icon: 'none',
							    duration: 2000
							});
						}
				    }
				});
			}else{
				uni.request({
				    url: request.common.baseUrl+'/api/goods/stores',
				    data: {
						latitude:uni.getStorageSync('keyLatitude'),
						longitude:uni.getStorageSync('keyLongitude'),
						page:this.page
					},
				    header: {
						'Content-Type':'application/json;charset=UTF-8',
						'Content-Type':'application/x-www-form-urlencoded'
				    },
				    success: (res) => {
				        if(res.data.code==200){
							for (var j = 0; j < res.data.data.length; j++) {
								if(res.data.data[j].distance>1000){
									res.data.data[j].distance=Math.round(res.data.data[j].distance/1000)+'km'
								}else{
									res.data.data[j].distance=res.data.data[j].distance+'m'
								}
								this.addressList.push(res.data.data[j])
							}
						}else{
							uni.showToast({
							    title: '暂无数据',
								icon: 'none',
							    duration: 2000
							});
						}
				    }
				});
			}
			
		}
	}
</script>

<style>
	@font-face {
		font-family: 'iconfont';
		src: url('@/static/font/iconfont.eot');
		src: url('@/static/font/iconfont.eot?#iefix') format('embedded-opentype'),
			url('@/static/font/iconfont.woff2') format('woff2'),
			url('@/static/font/iconfont.woff') format('woff'),
			url('@/static/font/iconfont.ttf') format('truetype'),
			url('@/static/font/iconfont.svg#iconfont') format('svg');
	}
	
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 34upx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
.font-sm{
	font-size:20upx;
	color:#999999;
}
.zindex_dis{z-index:1;}
.zindex_no{display:none;}
.input_box{
	width:700upx;
	padding:0 25upx 25upx 25upx;
	position:fixed;
	background-color:#000000;
	opacity:0.7;
}
.input_list{
	width:700upx;
	padding-top:25upx;
	padding-bottom:25upx;
	border-top:1upx solid #f6f6f6;
	text-indent:20upx;
}
.input_list:nth-child(1){
	border-top:unset;
}
.input_list text{
	color:#111111;
	font-size:24upx;
	height:60upx;
	line-height:60upx;
}
.input_list .input{
	width:540upx;
	color:#999999;
	font-size:24upx;
	display:inline-block;
	overflow:unset;
	height:60upx;
	line-height:60upx;
}
picker{color:#FFFFFF;}
.top{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>
